import React, { useEffect, useState } from 'react'
/* 
  useEffect:
    - Effect Hook 可以让你在函数组件中执行副作用操作
    - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
    - useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
    - useEffect接受第二个参数是一个数组
      - 数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
      - 如果传递的是一个空数组,则useEffct回调函数只有在初始化阶段才执行
      - 如果不传递第二个参数,则无论初始化还是更新的时候都会执行

    - useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或再次渲染的时候,会执行这个函数,用来做收尾工作

    - useEffect可以根据逻辑书写多次

*/

export default function App() {
  const [count, setCount] = useState(0);
  const [isHot, setIshot] = useState(true);


  /* //不传第二个参数初始化和更新都执行
  useEffect(() => {
    console.log("不传值");
    return () => {
      console.log("不传值的卸载函数");
    }
  }) */


  /* //空数组初始化才执行
  useEffect(() => {
    console.log("空数组");
    return () => {
      console.log("空数组的卸载函数");
    }
  }, []) */


  /* useEffect(() => {
    console.log("count变化");
    return () => {
      console.log("count变化的卸载函数");
    }
  }, [count]) */


  /* useEffect(() => {
    console.log("isHot变化");
    return () => {
      console.log("isHot变化的卸载函数");
    }
  }, [isHot]) */


  useEffect(() => {
    console.log("count,isHot 都变化");
    return () => {
      console.log("count,isHot 都变化的卸载函数");
    }
  }, [isHot, count])


  return (
    <div>
      <h1>count的值是{count}</h1>
      <button onClick={() => { setCount(count + 1) }}>累加</button>

      <hr />

      <h1>今天的天气真{isHot ? "热" : "冷"}啊</h1>
      <button onClick={() => { setIshot(!isHot) }}>切换天气</button>
    </div>
  );
}


